<template>
  <div class="root">
    <div class="leftbox">
      <div class="topcards">
        <div class="toptitle">
          <img
            style="margin-left: -0.15rem"
            src="../../../assets/image/seller/toplogo.png"
            alt=""
          />数据概要
        </div>
        <div class="cardsbox">
          <div class="cards">
            <div>昨日访客</div>
            <div>{{ centerData.yesterdayMember }}</div>
          </div>
          <div class="cards">
            <div>昨日访问量</div>
            <div>{{ centerData.yesterdayAccess }}</div>
          </div>
          <div class="cards">
            <div>店铺关注</div>
            <div>{{ centerData.storeCollection }}</div>
          </div>
          <div class="cards">
            <div>店铺分销数</div>
            <div>{{ centerData.storeSeller }}</div>
          </div>
          <div class="cards">
            <div>在售商品</div>
            <div>{{ centerData.storeSellProduct }}</div>
          </div>
        </div>
        <div class="cardsbox">
          <div class="cards">
            <div>图片包商品</div>
            <div>{{ centerData.storePictureNumber }}</div>
          </div>
          <div class="cards">
            <div>备货总量</div>
            <div>{{ centerData.storeDeliver }}</div>
          </div>
          <div class="cards">
            <div>待备货</div>
            <div>{{ centerData.storeWaitDeliver }}</div>
          </div>
          <div class="cards">
            <div>已备货</div>
            <div>{{ centerData.storeDelivered }}</div>
          </div>
        </div>
      </div>
      <div class="middlecards">
        <div class="toptitle">
          <img
            style="margin-right: 0.12rem"
            src="../../../assets/image/seller/middlelogo.png"
            alt=""
          />常用工具
        </div>
        <div class="cardsbox">
          <div class="cards" @click="$router.push('/CommodityCategory')">
            <img
              style="margin-left: 0.33rem"
              src="../../../assets/image/seller/loacl.png"
              alt=""
            />
            <div>发布商品</div>
          </div>
          <div class="cards">
            <img
              style="margin-left: 0.33rem"
              src="../../../assets/image/seller/flag.png"
              alt=""
            />
            <div>广告位报名</div>
          </div>
          <div class="cards">
            <img
              style="margin-left: 0.33rem"
              src="../../../assets/image/seller/pic.png"
              alt=""
            />
            <div>广告设置</div>
          </div>
          <div class="cards" @click="$router.push('/cangpushop')">
            <img
              style="margin-left: 0.33rem"
              src="../../../assets/image/seller/shop.png"
              alt=""
            />
            <div>商品管理</div>
          </div>
        </div>
        <div class="cardsbox">
          <div class="cards">
            <img
              style="margin-left: 0.33rem"
              src="../../../assets/image/seller/document.png"
              alt=""
            />
            <div>图片包管理</div>
          </div>
          <div class="cards" @click="$router.push('/shopMange')">
            <img
              style="margin-left: 0.33rem"
              src="../../../assets/image/seller/shuazi.png"
              alt=""
            />
            <div>店铺装修</div>
          </div>
          <div class="cards" @click="$router.push('/shopMange')">
            <img
              style="margin-left: 0.33rem"
              src="../../../assets/image/seller/dianpu.png"
              alt=""
            />
            <div>店铺信息</div>
          </div>
          <div class="cards" @click="$router.push('/shopMange')">
            <img
              style="margin-left: 0.33rem"
              src="../../../assets/image/seller/king.png"
              alt=""
            />
            <div>会员管理</div>
          </div>
        </div>
      </div>
      <div class="charts">
        <div class="topbuttons">
          <div
            class="topbutton"
            :style="isactive == index ? 'color: #E22A1F' : 'color: #666666'"
            v-for="(item, index) in chartslist"
            @click="isactive = index"
          >
            {{ item }}
          </div>
        </div>
        <div class="echartsbutton">
          <div
            :style="day == 7 ? 'color: #E22A1F' : 'color: #666666'"
            @click="getTime(7)"
          >
            近一周
          </div>
          <div
            :style="day == 30 ? 'color: #E22A1F' : 'color: #666666'"
            @click="getTime(30)"
          >
            近一个月
          </div>
          <div
            :style="day == 90 ? 'color: #E22A1F' : 'color: #666666'"
            @click="getTime(90)"
          >
            近三个月
          </div>
        </div>
        <div
          class="chartsbox"
          id="pieChart"
          style="width: 14.2rem; height: 4.5rem"
        ></div>
      </div>
    </div>
    <div class="rightbox">
      <div class="name">
        <div class="top">
          <img src="../../../assets/image/seller/anme.png" alt="" />
          <div class="righttext">
            <div>{{ storeData.storeName }}</div>
            <div
              style="font-size: 0.12rem; color: #666666; margin-top: 0.02rem"
            >
              <!-- XXX认证专家 -->
            </div>
          </div>
        </div>
        <div class="middle">
          <div
            class="button"
            @click="
              $router.push({
                path: '/highshop',
                query: {
                  id: storeData.id,
                },
              })
            "
          >
            <img src="../../../assets/image/seller/middleshop.png" alt="" />进店
          </div>
          <div class="button" @click="$router.push('/shopMange')">
            <img src="../../../assets/image/seller/edit.png" alt="" />修改资料
          </div>
        </div>
        <div class="bottom">
          <div class="item">
            <div>开店时间</div>
            <div>{{ storeData.createTime }}</div>
          </div>
          <div class="item">
            <div>诚信商家</div>
            <div>
              未开通<span
                style="color: #e22a1f; margin-left: 0.16rem; cursor: pointer"
                >去开通>></span
              >
            </div>
          </div>
          <div class="item">
            <div>实名认证</div>
            <div>{{ userData.realName }}</div>
          </div>
          <div class="item">
            <div>营业执照</div>
            <div v-if="userData.businessLicense">已提交</div>
            <div v-else>未提交</div>
          </div>
        </div>
      </div>
      <div class="money">
        <div class="moneytext">¥ {{ centerData.storeAdBalance }}</div>
        <div class="middletext">广告金余额</div>
        <div class="button">
          <img src="../../../assets/image/seller/money.png" alt="" />广告金充值
        </div>
      </div>
      <div class="qroe">
        <div class="text">专属业务员</div>
        <div class="middletext">（微信扫一扫，在线咨询）</div>
        <img src="../../../assets/image/help/icon5.png" alt="" />
      </div>
      <div class="help">
        <div class="text" style="margin-top: 0.2rem">帮助中心</div>
        <div
          class="items"
          v-for="(item, index) in newLsit"
          :key="index"
          @click="
            $router.push({
              path: '/helpDetails',
              query: {
                id: id,
                index: 1,
              },
            })
          "
        >
          {{ item.name }}
        </div>

        <div
          class="buttontext"
          @click="
            $router.push({
              path: '/HelpCenter',
              query: {
                index: 1,
              },
            })
          "
        >
          查看更多
          <span class="jiantou">></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserData } from "@/api/user";
import {
  pmsStore,
  selectStoreDecorateByStoreId,
  selectStorePersonalCenter,
} from "@/api/shopMange";
import * as echarts from "echarts";
import { selectAboutUs, selectHelpCenter } from "@/api/HelpCenter";
export default {
  data() {
    return {
      chartslist: ["店铺访问趋势", "店铺分销趋势"],
      isactive: 0,
      userData: {},
      storeData: {},
      newLsit: [],
      centerData: {},
      day: 7,
      accessHistory:[],
      salesHistory:[]
    };
  },
  created() {
    this.getUserData();
    this.selectHelpCenter();
  },
  mounted() {
   
  },
  methods: {
    getTime(index){
      this.day=index
      this.selectStorePersonalCenter(this.storeData.id)
    },
    //获取个人中心信息
    selectStorePersonalCenter(id) {
      selectStorePersonalCenter({
        storeId: id,
        day: this.day,
      }).then((data) => {
        this.centerData = data.data;
        this.accessHistory=data.data.accessHistory
        this.salesHistory=data.data.salesHistory
        this.drawChart();
      });
    },
    selectHelpCenter() {
      selectHelpCenter().then((data) => {
        this.newLsit = data.data.slice(0, 5);
      });
    },
    //获取个人信息
    getUserData() {
      getUserData().then((data) => {
        this.userData = data.data;
        pmsStore({
          memberId: data.data.id,
        }).then((res) => {
          this.storeData = res.data;
          this.selectStorePersonalCenter(res.data.id);
        });
      });
    },
    drawChart() {
      // 初始化echarts实例
      let myChart = echarts.init(document.getElementById("pieChart"));
      // 造图表数据，直接在echarts官网复制过来的数据
      let option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
        },
        yAxis: {
          type: "value",
          // boundaryGap: [0, "30%"],
        },
        // visualMap: {
        //   type: "piecewise",
        //   show: false,
        //   dimension: 0,
        //   seriesIndex: 0,
        //   pieces: [
        //     {
        //       gt: 1,
        //       lt: 3,
        //       color: "rgba(0, 0, 180, 0.4)",
        //     },
        //     {
        //       gt: 5,
        //       lt: 7,
        //       color: "rgba(0, 0, 180, 0.4)",
        //     },
        //   ],
        // },
        tooltip:{
          show:true
        },
        series: [
          {
            type: "line",
            smooth: 0.6,
            // symbol: "none",
            lineStyle: {
              color: "#5470C6",
              width: 5,
            },
            // markLine: {
            //   symbol: ["none", "none"],
            //   label: { show: false },
            //   data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }],
            // },
            areaStyle: {},
            data: this.isactive?this.salesHistory:this.accessHistory,
          },
        ],
      };

      myChart.setOption(option);

      this.myChart = myChart;
    },
  },
  watch:{
    isactive(){
      this.drawChart();
    },
  }
};
</script>

<style scoped lang="scss">
.root {
  display: flex;
  //   justify-content: space-between;
  //   justify-content: center;
  //   align-items: center;
  box-shadow: 0 0.08rem 0.32rem 0 rgba(0, 0, 0, 0.08);
  background-color: #fff;
  padding: 0.13rem 1.34rem 0.22rem 0.2rem;
  .leftbox {
    .topcards {
      .toptitle {
        display: flex;
        align-items: center;
        justify-content: start;
        font-family: PingFang SC;
        font-size: 0.18rem;
        font-weight: bold;
        color: #000000;
      }
      .cardsbox {
        display: flex;
        margin-bottom: 0.18rem;
        .cards {
          width: 2.18rem;
          height: 0.92rem;
          background: #f5f7f9;
          border: 0.01rem solid rgba(0, 0, 0, 0);
          display: flex;
          flex-direction: column;
          margin-right: 0.24rem;
          border-radius: 0.12rem;
        }
        .cards div:first-child {
          font-family: PingFang SC;
          font-size: 0.12rem;
          color: #666666;
          margin-top: 0.2rem;
          margin-left: 0.2rem;
        }
        .cards div:nth-child(2) {
          font-family: D-DIN;
          font-size: 0.2rem;
          font-weight: bold;
          color: #333333;
          margin-top: 0.1rem;
          margin-left: 0.2rem;
        }
      }
    }
    .middlecards {
      .toptitle {
        display: flex;
        align-items: center;
        justify-content: start;
        font-family: PingFang SC;
        font-size: 0.18rem;
        font-weight: bold;
        color: #000000;
        margin-bottom: 0.16rem;
      }
      .cardsbox {
        display: flex;
        margin-bottom: 0.18rem;
        .cards {
          width: 2.78rem;
          height: 0.92rem;
          background: #f5f7f9;
          border: 0.01rem solid rgba(0, 0, 0, 0);
          display: flex;
          align-items: center;
          //   justify-content: center;
          margin-right: 0.24rem;
          border-radius: 0.12rem;
          font-family: PingFang SC;
          font-size: 0.2rem;
          font-weight: 500;
        }
        .cards div {
          margin-left: 0.16rem;
        }
      }
    }
    .charts {
      .topbuttons {
        display: flex;
        .topbutton {
          width: 1.64rem;
          height: 0.4rem;
          text-align: center;
          line-height: 0.4rem;
          border-radius: 0.4rem;
          background: #f5f7f9;
          font-family: PingFang SC;
          font-size: 0.2rem;
          font-weight: bold;
          margin-right: 0.2rem;
          cursor: pointer;
        }
      }
      .echartsbutton {
        // float: right;
        display: flex;
        font-family: PingFang SC;
        font-size: 0.16rem;
        font-weight: bold;
        margin-left: 9.3rem;
      }
      .echartsbutton div {
        cursor: pointer;
        margin-right: 0.4rem;
      }
      .chartsbox {
        margin-left: -0.8rem;
      }
    }
  }
  .rightbox {
    margin-left: -1rem;
    flex: 1;
    .name {
      padding: 0.32rem 0.19rem 0.29rem 0.23rem;
      width: 2.58em;
      height: 2.26rem;
      border-radius: 0.12rem;
      background: #f5f7f9;
      .top {
        align-items: center;
        // justify-content: center;
        display: flex;
        .righttext {
          margin-left: 0.1rem;
          font-family: PingFang SC;
          font-size: 0.18rem;
          font-weight: 500;
        }
      }
      .middle {
        display: flex;
        margin-top: 0.09rem;
        margin-left: 0.25rem;

        .button {
          padding: 0.08rem 0.13rem 0.09rem 0.16rem;
          height: 0.15rem;
          border-radius: 2.27rem;
          border: 0.01rem solid #e8e8e8;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: PingFang SC;
          font-size: 0.12rem;
          color: #333333;
          cursor: pointer;
          margin-right: 0.1rem;
        }

        .button img {
          margin-right: 0.05rem;
        }
      }
      .bottom {
        width: 100%;
        .item {
          width: 100%;
          justify-content: space-between;
          display: flex;
          font-family: PingFang SC;
          font-size: 0.14rem;
          margin-top: 0.18rem;
        }
        .item :last-child {
          color: #999999;
        }
      }
    }
    .money {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 3rem;
      height: 1.5rem;
      background: #fff4f4;
      border-radius: 0.12rem;
      margin-top: 0.23rem;
      .moneytext {
        font-family: D-DIN;
        font-size: 0.24rem;
        font-weight: bold;
      }
      .middletext {
        margin-top: 0.05rem;
        font-family: PingFang SC;
        font-size: 0.12rem;
        color: rgba(51, 51, 51, 0.6);
      }
      .button {
        margin-top: 0.24rem;
        font-family: PingFang SC;
        font-size: 0.12rem;
        color: #333333;
        width: 1.1rem;
        height: 0.32rem;
        border: 0.01rem solid #e8e8e8;
        border-radius: 2.27rem;
        display: flex;
        cursor: pointer;
        justify-content: center;
        align-items: center;
      }
      .button img {
        margin-right: 0.04rem;
      }
    }
    .qroe {
      height: 2.58rem;
      width: 3rem;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      align-items: center;
      border-radius: 0.12rem;
      background: #f4fff3;
      margin-top: 0.24rem;

      .text {
        margin-top: 0.3rem;

        font-family: PingFang SC;
        font-size: 0.14rem;
        font-weight: bold;
      }
      .middletext {
        font-family: PingFang SC;
        font-size: 0.12rem;
        color: rgba(51, 51, 51, 0.6);
        margin-top: 0.06rem;
        margin-bottom: 0.06rem;
      }
    }
    .help {
      display: flex;
      flex-direction: column;
      align-items: center;
      // justify-content: center;
      width: 2.8rem;
      padding: 0 0.1rem;
      height: 3.17rem;
      border-radius: 0.12rem;
      border: 0.01rem solid rgba(0, 0, 0, 0);
      background: #f3feff;
      .text {
        font-family: PingFang SC;
        font-size: 0.14rem;
        color: #333333;
        margin-bottom: 0.18rem;
      }
      .items {
        width: 2.8rem;
        height: 0.32rem;
        border-radius: 0.04rem;
        background: #ffffff;
        border: 0.01rem solid rgba(0, 0, 0, 0);
        text-align: center;
        line-height: 0.32rem;
        font-family: PingFang SC;
        font-size: 0.12rem;
        color: #333333;
        margin-bottom: 0.08rem;
        white-space: wrap;
      }
      .buttontext {
        font-family: PingFang SC;
        font-size: 0.12rem;
        color: rgba(51, 51, 51, 0.6);
        cursor: pointer;
        .jiantou {
          cursor: pointer;
          display: inline-block;
          transform: rotate(90deg);
        }
      }
    }
  }
}
</style>
<style scoped lang="scss">
@media screen and (max-width: 1300px) {
  .root {
    display: flex;
    //   justify-content: space-between;
    //   justify-content: center;
    //   align-items: center;
    box-shadow: 0 0.08rem 0.32rem 0 rgba(0, 0, 0, 0.08);
    background-color: #fff;
    padding: 0.13rem 1.34rem 0.22rem 0.2rem;
    padding: 0.2rem;
    .leftbox {
      .topcards {
        .toptitle {
          display: flex;
          align-items: center;
          justify-content: start;
          font-family: PingFang SC;
          font-size: 0.18rem;
          font-weight: bold;
          color: #000000;
        }
        .cardsbox {
          display: flex;
          margin-bottom: 0.18rem;
          .cards {
            width: 2rem;
            height: 0.92rem;
            background: #f5f7f9;
            border: 0.01rem solid rgba(0, 0, 0, 0);
            display: flex;
            flex-direction: column;
            margin-right: 0.24rem;
            border-radius: 0.12rem;
          }
          .cards div:first-child {
            font-family: PingFang SC;
            font-size: 0.12rem;
            color: #666666;
            margin-top: 0.2rem;
            margin-left: 0.2rem;
          }
          .cards div:nth-child(2) {
            font-family: D-DIN;
            font-size: 0.2rem;
            font-weight: bold;
            color: #333333;
            margin-top: 0.1rem;
            margin-left: 0.2rem;
          }
        }
      }
      .middlecards {
        .toptitle {
          display: flex;
          align-items: center;
          justify-content: start;
          font-family: PingFang SC;
          font-size: 0.18rem;
          font-weight: bold;
          color: #000000;
          margin-bottom: 0.16rem;
        }
        .cardsbox {
          display: flex;
          margin-bottom: 0.18rem;
          .cards {
            width: 2.58rem;
            height: 0.92rem;
            background: #f5f7f9;
            border: 0.01rem solid rgba(0, 0, 0, 0);
            display: flex;
            align-items: center;
            //   justify-content: center;
            margin-right: 0.24rem;
            border-radius: 0.12rem;
            font-family: PingFang SC;
            font-size: 0.2rem;
            font-weight: 500;
          }
          .cards div {
            margin-left: 0.16rem;
          }
        }
      }
      .charts {
        .topbuttons {
          display: flex;

          .topbutton {
            width: 1.64rem;
            height: 0.4rem;
            text-align: center;
            line-height: 0.4rem;
            border-radius: 0.4rem;
            background: #f5f7f9;
            font-family: PingFang SC;
            font-size: 0.2rem;
            font-weight: bold;
            margin-right: 0.2rem;
            cursor: pointer;
          }
        }
        .echartsbutton {
          // float: right;
          display: flex;
          font-family: PingFang SC;
          font-size: 0.16rem;
          font-weight: bold;
          margin-left: 8rem;
        }
        .echartsbutton div {
          cursor: pointer;
          margin-right: 0.4rem;
        }
        .chartsbox {
          margin-left: -0.8rem;
          width: 12.2rem !important;
        }
      }
    }
    .rightbox {
      margin-left: 0;
      flex: 1;
      .name {
        padding: 0.32rem 0.19rem 0.29rem 0.23rem;
        width: 3.28em;
        height: 3rem;
        border-radius: 0.12rem;
        background: #f5f7f9;
        .top {
          align-items: center;
          // justify-content: center;
          display: flex;
          .righttext {
            margin-left: 0.1rem;
            font-family: PingFang SC;
            font-size: 0.18rem;
            font-weight: 500;
          }
        }
        .middle {
          display: flex;
          margin-top: 0.09rem;
          margin-left: 0.25rem;

          .button {
            padding: 0.08rem 0.13rem 0.09rem 0.16rem;
            height: 0.15rem;
            border-radius: 2.27rem;
            border: 0.01rem solid #e8e8e8;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: PingFang SC;
            font-size: 0.12rem;
            color: #333333;
            cursor: pointer;
            margin-right: 0.1rem;
          }

          .button img {
            margin-right: 0.05rem;
          }
        }
        .bottom {
          width: 100%;
          .item {
            width: 100%;
            justify-content: space-between;
            display: flex;
            font-family: PingFang SC;
            font-size: 0.14rem;
            margin-top: 0.18rem;
          }
          .item :last-child {
            color: #999999;
          }
        }
      }
      .money {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 3.68rem;
        height: 2rem;
        background: #fff4f4;
        border-radius: 0.12rem;
        margin-top: 0.23rem;
        .moneytext {
          font-family: D-DIN;
          font-size: 0.24rem;
          font-weight: bold;
        }
        .middletext {
          margin-top: 0.05rem;
          font-family: PingFang SC;
          font-size: 0.12rem;
          color: rgba(51, 51, 51, 0.6);
        }
        .button {
          margin-top: 0.24rem;
          font-family: PingFang SC;
          font-size: 0.12rem;
          color: #333333;
          width: 1.6rem;
          height: 0.32rem;
          border: 0.01rem solid #e8e8e8;
          border-radius: 2.27rem;
          display: flex;
          cursor: pointer;
          justify-content: center;
          align-items: center;
        }
        .button img {
          margin-right: 0.04rem;
        }
      }
      .qroe {
        height: 3.5rem;
        width: 3.7rem;
        display: flex;
        flex-direction: column;
        // justify-content: center;
        align-items: center;
        border-radius: 0.12rem;
        background: #f4fff3;
        margin-top: 0.24rem;

        .text {
          margin-top: 0.3rem;

          font-family: PingFang SC;
          font-size: 0.14rem;
          font-weight: bold;
        }
        .middletext {
          font-family: PingFang SC;
          font-size: 0.12rem;
          color: rgba(51, 51, 51, 0.6);
          margin-top: 0.06rem;
          margin-bottom: 0.06rem;
        }
      }
      .help {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 3.5rem;
        padding: 0 0.1rem;
        height: 3.7rem;
        border-radius: 0.12rem;
        border: 0.01rem solid rgba(0, 0, 0, 0);
        background: #f3feff;
        margin-top: 0.2rem;
        .text {
          font-family: PingFang SC;
          font-size: 0.14rem;
          color: #333333;
          margin-bottom: 0.18rem;
        }
        .items {
          width: 2.8rem;
          height: auto;
          border-radius: 0.04rem;
          background: #ffffff;
          border: 0.01rem solid rgba(0, 0, 0, 0);
          text-align: center;
          line-height: 0.32rem;
          font-family: PingFang SC;
          font-size: 0.12rem;
          color: #333333;
          margin-bottom: 0.08rem;
          white-space: wrap;
        }
        .buttontext {
          font-family: PingFang SC;
          font-size: 0.12rem;
          color: rgba(51, 51, 51, 0.6);
          .jiantou {
            cursor: pointer;
            display: inline-block;
            transform: rotate(90deg);
          }
        }
      }
    }
  }
}
</style>
